【CoffeeScript編】Node + Socket.IO で簡単なチャットアプリの作成

うえじゅん

2012.10.25

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、うえじゅんです。
今回は前回作成したチャットアプリを「CoffeeScript」で置き換えてみます。

CoffeeScriptについては「はじめるCoffeeScript」シリーズを見ていただけると嬉しいです。

CoffeeScriptのインストール

まず「CoffeeScript」インストールします。
ターミナルで以下のコマンドを実行してください。
(エラーが出る場合は、「sudo」をつけてみてください。)

「CoffeeScript」

npm install -g coffee-script

インストールが終わったらこちらもバージョンを確認しておきましょう。
「coffee -v」で「CoffeeScript version 1.4.0」と表示されたら成功です。

コンパイルをすることになるので、環境も作ってしまいましょう。
まずプロジェクトの配下に「coffee」フォルダを作成します。
さらに「coffee」フォルダの配下に「app.coffee」ファイルを作成します。
今回はファイルが少ないので必要ないかもしれませんが、「js」ファイルと「coffee」ファイルを同じ場所に置くとごちゃごちゃになりやすいので、「CoffeeScript」のファイルは別に配置すると管理するのが便利になります。

cmapp
├ app.js
├ coffee
│ ├ app.coffee
│ └ public
│ └ javascripts
│ └ chat.coffee
├ node_modules
├ package.json
├ ・・・

また今回コンパイル時に使うオプションは3つです。
　-c　コンパイルして「.js」ファイルにする
-b　コンパイル時にトップレベルの関数ラッパーを含めないようにする
-o　引数に指定したディレクトリを保存先にする

以下は指定すると便利です。
　-w　ファイルを監視しての変更があった際に指定したコマンドを再実行する

coffee -cbo . coffee/

coffee -cbwo . coffee/

app.jsのcoffee化

「CoffeeScript」に変換するのであれば「js2coffee」を使えば一発ですが、最初のうちは学びも兼ねて地道に変換しましょう。
(js2coffeeについては「node.jsのいろいろなモジュール11 – js2coffee」を参照してください)

「app.js」

/**
 * Module dependencies.
 */

var express = require('express')
  , http = require('http')
  , path = require('path')
  , io = require('socket.io')

var app = express()
  , server = require('http').createServer(app)
  , io = io.listen(server);

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(path.join(__dirname, 'public')));
});

app.configure('development', function(){
  app.use(express.errorHandler());
});

server.listen(app.get('port'))

io.sockets.on('connection', function(socket) {
  socket.on('message:send', function(data) {
    io.sockets.emit('message:receive', { message: data.message });
  });
});

「app.coffee」

###*
 * Module dependencies.
###

express = require 'express'
http = require 'http'
path = require 'path'
io = require 'socket.io'

app = express()
server = http.createServer app
io = io.listen server

app.configure ->
  app.set 'port', process.env.PORT || 3000
  app.set 'views', __dirname + '/views'
  app.set 'view engine', 'jade'
  app.use express.favicon()
  app.use express.logger 'dev'
  app.use express.bodyParser()
  app.use express.methodOverride()
  app.use app.router
  app.use express.static path.join __dirname, "public"

app.configure 'development', ->
  app.use express.errorHandler()

server.listen app.get 'port'

io.sockets.on 'connection', (socket) ->
  socket.on 'message:send', (data) ->
    io.sockets.emit 'message:receive', { message: data.message }

そんなに複雑なことはしていないので、coffee化のメリットはあまりないかもしれませんが、それでもシンプルにはなったと思います。

chat.jsのcoffee化

「chat.js」

var socket = io.connect();

socket.on('message:receive', function (data) {
  $("div#chat-area").prepend("<div>" + data.message + "</div>");
});

function send() {
  var msg = $("input#message").val();
  $("input#message").val("");
  socket.emit('message:send', { message: msg });
}

「chat.coffee」

socket = io.connect()

socket.on 'message:receive', (data) ->
  $("div#chat-area").prepend "<div>" + data.message + "</div>"

send = ->
  msg = $("input#message").val()
  $("input#message").val ""
  socket.emit 'message:send', message: msg

こちらもそれ程メリットを感じれる規模感ではありませんね・・・